<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09- 练习自定义指令</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        #app div {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        #app .hello {
            background-color: red;
            top: 0;
            left: 0;
        }

        #app .world {
            background-color: blue;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="hello" v-drag>one</div>
    <div class="world" v-drag>two</div>

</div>
<script>
    Vue.directive('drag', function (el) {
        el.onmousedown = (e) => {
            // 获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
            var disX = e.clientX - el.offsetLeft;
            var disY = e.clientY - el.offsetTop;
            // console.log(disX, disY)

            //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
            document.onmousemove = (e) => {
                // 获取移动后div的位置：鼠标位置-disX/disY
                var l = e.clientX - disX;
                var t = e.clientY - disY;

                el.style.left = l + 'px';
                el.style.top = t + 'px';

            }
            // 停止移动
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'ton',
            }
        },
        methods: {},
        directives: { //自定义局部指令

        },
    });


</script>
</body>
</html>